<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>
<%--
  Created by IntelliJ IDEA.
  User: mornd
  Date: 2020/11/13
  Time: 13:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
  <%--第一步--%>
  <!-- 获取CSRF Token -->
  <meta name="_csrf" content="${_csrf.token}"/>
  <!-- 获取CSRF头，默认为X-CSRF-TOKEN -->
  <meta name="_csrf_header" content="${_csrf.headerName}"/>

  <meta charset="utf-8">
  <title>酒店管理系统-主页</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta http-equiv="Access-Control-Allow-Origin" content="*">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="format-detection" content="telephone=no">
  <link rel="icon" href="/statics/layui/images/favicon.ico">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui/lib/layui-v2.5.5/css/layui.css" media="all">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui/css/layuimini.css?v=2.0.4.2" media="all">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui/css/themes/default.css" media="all">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/statics/layui/css/public.css" media="all">
  <!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
  <![endif]-->
  <style id="layuimini-bg-color">
  </style>
  <!--修改密码面板-->
  <style>
    .layui-form-item .layui-input-company {width: auto;padding-right: 10px;line-height: 38px;}
  </style>
</head>
<body class="layui-layout-body layuimini-all">
<div class="layui-layout layui-layout-admin">

  <div class="layui-header header">
    <div class="layui-logo layuimini-logo"></div>

    <div class="layuimini-header-content">
      <a>
        <div class="layuimini-tool"><i title="展开" class="fa fa-outdent" data-side-fold="1"></i></div>
      </a>

      <!--电脑端头部菜单-->
      <ul class="layui-nav layui-layout-left layuimini-header-menu layuimini-menu-header-pc layuimini-pc-show">
      </ul>

      <!--手机端头部菜单-->
      <ul class="layui-nav layui-layout-left layuimini-header-menu layuimini-mobile-show">
        <li class="layui-nav-item">
          <a href="javascript:;"><i class="fa fa-list-ul"></i> 选择模块</a>
          <dl class="layui-nav-child layuimini-menu-header-mobile">
          </dl>
        </li>
      </ul>

      <ul class="layui-nav layui-layout-right">

        <li class="layui-nav-item" lay-unselect>
          <a href="javascript:;" data-refresh="刷新"><i class="fa fa-refresh"></i></a>
        </li>
        <li class="layui-nav-item" lay-unselect>
          <a href="javascript:;" data-clear="清理" class="layuimini-clear"><i class="fa fa-trash-o"></i></a>
        </li>
        <li class="layui-nav-item mobile layui-hide-xs" lay-unselect>
          <a href="javascript:;" data-check-screen="full"><i class="fa fa-arrows-alt"></i></a>
        </li>
        <li class="layui-nav-item layuimini-setting">
          <a href="javascript:;">
            <security:authentication property="name"/>
          </a>
          <dl class="layui-nav-child">
            <dd>
              <a href="javascript:;" layuimini-content-href="page/user-setting.html" data-title="基本资料" data-icon="fa fa-gears">基本资料<span class="layui-badge-dot"></span></a>
            </dd>
            <dd>
              <a href="javascript:;" id="resetPassword" data-title="修改密码" data-icon="fa fa-gears">修改密码</a>
            </dd>
            <dd>
              <hr>
            </dd>
            <dd>
              <a href="javascript:;" class="login-out">退出登录</a>
            </dd>
          </dl>
        </li>
        <li class="layui-nav-item layuimini-select-bgcolor" lay-unselect>
          <a href="javascript:;" data-bgcolor="配色方案"><i class="fa fa-ellipsis-v"></i></a>
        </li>
      </ul>
    </div>
  </div>

  <!--无限极左侧菜单-->
  <div class="layui-side layui-bg-black layuimini-menu-left">
  </div>

  <!--初始化加载层-->
  <div class="layuimini-loader">
    <div class="layuimini-loader-inner"></div>
  </div>

  <!--手机端遮罩层-->
  <div class="layuimini-make"></div>

  <!-- 移动导航 -->
  <div class="layuimini-site-mobile"><i class="layui-icon"></i></div>

  <div class="layui-body">

    <div class="layuimini-tab layui-tab-rollTool layui-tab" lay-filter="layuiminiTab" lay-allowclose="true">
      <ul class="layui-tab-title">
        <li class="layui-this" id="layuiminiHomeTabId" lay-id=""></li>
      </ul>
      <div class="layui-tab-control">
        <li class="layuimini-tab-roll-left layui-icon layui-icon-left"></li>
        <li class="layuimini-tab-roll-right layui-icon layui-icon-right"></li>
        <li class="layui-tab-tool layui-icon layui-icon-down">
          <ul class="layui-nav close-box">
            <li class="layui-nav-item">
              <a href="javascript:;"><span class="layui-nav-more"></span></a>
              <dl class="layui-nav-child">
                <dd><a href="javascript:;" layuimini-tab-close="current">关 闭 当 前</a></dd>
                <dd><a href="javascript:;" layuimini-tab-close="other">关 闭 其 他</a></dd>
                <dd><a href="javascript:;" layuimini-tab-close="all">关 闭 全 部</a></dd>
              </dl>
            </li>
          </ul>
        </li>
      </div>
      <div class="layui-tab-content">
        <div id="layuiminiHomeTabIframe" class="layui-tab-item layui-show"></div>
      </div>
    </div>
  </div>
</div>
<div id="resetPasswordWindow" style="display: none;padding: 5px">
  <form class="layui-form" style="width:90%;" id="dataFrm" lay-filter="dataFrm">
    <div class="layuimini-container">
      <div class="layuimini-main">
        <div class="layui-form layuimini-form">
          <div class="layui-form-item">
            <label class="layui-form-label required">旧的密码</label>
            <div class="layui-input-block">
              <input type="password" name="old_password" lay-verify="required" lay-reqtext="旧的密码不能为空" placeholder="请输入旧的密码"  value="" class="layui-input">
              <tip>填写自己账号的旧的密码。</tip>
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label required">新的密码</label>
            <div class="layui-input-block">
              <input type="password" name="new_password" lay-verify="required" lay-reqtext="新的密码不能为空" placeholder="请输入新的密码"  value="" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label required">新的密码</label>
            <div class="layui-input-block">
              <input type="password" name="again_password" lay-verify="required" lay-reqtext="新的密码不能为空" placeholder="请输入新的密码"  value="" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <div class="layui-input-block">
              <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn"><i class="layui-icon layui-icon-ok"></i>确认</button>
              <button type="reset" class="layui-btn layui-btn-warm"><span class="layui-icon layui-icon-refresh-1"></span>清空</button>
              <a href="javascript:;" class="layui-btn layui-btn-info cancelBtn"><i class="layui-icon layui-icon-return"></i>返回</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
<script src="${pageContext.request.contextPath}/statics/layui/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="${pageContext.request.contextPath}/statics/layui/js/lay-config.js?v=2.0.0" charset="utf-8"></script>
<script>
  layui.use(['jquery', 'layer', 'miniAdmin','miniTongji','form'], function () {
    var $ = layui.jquery,
        layer = layui.layer,
        miniAdmin = layui.miniAdmin,
        form = layui.form,
        miniTongji = layui.miniTongji;

    var options = {
      iniUrl: "/menu/loadIndexMenuLeft",    // 初始化接口
      clearUrl: "/statics/layui/api/clear.json", // 缓存清理接口
      urlHashLocation: true,      // 是否打开hash定位
      bgColorDefault: false,      // 主题默认配置
      multiModule: true,          // 是否开启多模块
      menuChildOpen: false,       // 是否默认展开菜单
      loadingTime: 0,             // 初始化加载时间
      pageAnim: true,             // iframe窗口动画
      maxTabNum: 20,              // 最大的tab打开数量
    };
    miniAdmin.render(options);

    // 百度统计代码，只统计指定域名
    miniTongji.render({
      specific: true,
      domains: [
        '99php.cn',
        'layuimini.99php.cn',
        'layuimini-onepage.99php.cn',
      ],
    });
    //修改密码
    let mainIndex;
    $('#resetPassword').click(function () {
      mainIndex = layer.open({
        type:1,
        title:"修改密码",
        area: ["600px", "350px"],//窗口宽高
        content: $("#resetPasswordWindow"),//引用的内容窗口
        success:function () {
          //清空表单数据
          $("#dataFrm")[0].reset();
        }
      });
    });

    //2 security 中使用post提交
    //获取<meta>标签中封装的CSRF Token
    var token = $("meta[name='_csrf']").attr("content");
    var header = $("meta[name='_csrf_header']").attr("content");
    //将头中的CSRF Token信息进行发送
    $(document).ajaxSend(function (e,xhr,options) {
      xhr.setRequestHeader(header,token);
    });

    //监听提交
    form.on('submit(saveBtn)', function (data) {
      let old_password = $("[name='old_password']");
      let new_password = $("[name='new_password']");
      let again_password = $("[name='again_password']");
      if(new_password.val() != again_password.val()){
        layer.msg('两次密码不一致！',{icon:5});
        new_password.css('border','1px solid red');
        again_password.css('border','1px solid red');
        return false;
      }
      if(new_password.val() == old_password.val()){
        layer.msg('不可重复修改密码！',{icon:2});
        old_password.css('border','1px solid red');
        new_password.css('border','1px solid red');
        again_password.css('border','1px solid red');
        return false;
      }
      if(new_password.val().length < 3){
        new_password.css('border','1px solid red');
        again_password.css('border','1px solid red');
        layer.msg('重置密码必须大于6位数！',{icon:2});
        return false;
      }
      $.post("/resetPassword",{'oldPwd':old_password.val(),'newPwd':new_password.val()},function (result) {
        if(result.matche){
          if(result.success){
            layer.alert(result.message,{icon:1});
            setTimeout(function () {return location.href = "/logout";},2000);
          }else{
            layer.alert(result.message,{icon:2});
          }
        }else{
          layer.msg(result.message);
          $("[name='old_password']").css('border','1px solid red');
        }
      },'json');
      return false;
    });

    //点击输入框将边框颜色改回来
    $('#dataFrm').find(":input[type='password']").each(function(){
      $(this).focus(function () {
        $(this).css('border','1px solid #E6E6E6');
      })
    });
    //关闭修改密码面板
    $('.cancelBtn').click(function () {
      layer.close(mainIndex);
    });

    $('.login-out').on("click", function () {
      layer.confirm("确定要退出此次登录吗？",{icon:3,title:'请确认'},function (index) {
        window.location = '/logout';
        layer.close(index);
      });
    });
  });
</script>
</body>
</html>
